<ion-view id="home" class="">
  <ion-nav-title>

  </ion-nav-title>

  <ion-content
    class="has-header text-center padding-xs positive-900-bg circle-bg-dark">

    <div id="helptip-home-logo" class="logo"></div>

    <h4>
      <span class="hidden-xs" translate>HOME.WELCOME</span>
      <b ng-show="!loading" translate-values=":currency:{currency: $root.currency.name}" translate>HOME.MESSAGE</b>
    </h4>

    <div class="center padding" ng-if="loading">
      <ion-spinner icon="android" ></ion-spinner>
    </div>

    <div class="center padding animate-fade-in animate-show-hide ng-hide" ng-show="!loading && error">
      <div class="card card-item padding">
        <p class="item-content item-text-wrap">
            <span class="dark" trust-as-html="'HOME.CONNECTION_ERROR'|translate:node"></span>
        </p>

        <!-- Retry -->
        <button type="button"
                class="button button-positive icon icon-left ion-refresh ink"
                ng-click="reload()">{{'COMMON.BTN_REFRESH'|translate}}</button>
      </div>
    </div>

    <div class="center animate-fade-in animate-show-hide ng-hide" ng-show="!loading && !error">

      <!-- Help tour (NOT ready yet for small device) -->
      <button type="button"
              class="button button-block button-stable button-raised icon-left icon ion-easel ink-dark hidden-xs"
              ng-show="login"
              ng-click="startHelpTour()" >
        {{'COMMON.BTN_HELP_TOUR'|translate}}
      </button>

      <button type="button"
              class="button button-block button-positive button-raised ink-dark"
              ng-click="showJoinModal()" ng-if="!login" translate>LOGIN.CREATE_FREE_ACCOUNT</button>

      <button type="button"
              class="item button button-block button-positive button-raised icon icon-left ion-person ink-dark"
              ui-sref="app.view_wallet" ng-show="login" translate>MENU.ACCOUNT</button>

      <button type="button"
              class="item button button-block button-positive button-raised icon icon-left ion-card ink-dark visible-xs"
              ui-sref="app.view_wallet_tx" ng-if="login" translate>MENU.TRANSACTIONS</button>

      <br class="visible-xs visible-sm"/>

      <!-- join link -->
      <div class="text-center no-padding" ng-show="!login">
        <br class="visible-xs visible-sm"/>
        {{'LOGIN.HAVE_ACCOUNT_QUESTION'|translate}}
        <b>
          <a class="assertive hidden-xs hidden-sm" ui-sref="app.view_wallet" translate>
            COMMON.BTN_LOGIN
          </a>
        </b>
      </div>

      <!-- disconnect link -->
      <div class="text-center no-padding" ng-show="login">
        <br class="visible-xs visible-sm"/>
        <span ng-bind-html="'HOME.NOT_YOUR_ACCOUNT_QUESTION'|translate:{pubkey: walletData.pubkey}"></span>
        <br/>
        <b>
          <a class="assertive hidden-xs hidden-sm" ng-click="logout()" translate>
            HOME.BTN_CHANGE_ACCOUNT
          </a>
        </b>
      </div>

      <button type="button"
              class="button button-block button-stable button-raised ink visible-xs visible-sm"
              ui-sref="app.view_wallet" ng-if="!login" translate>COMMON.BTN_LOGIN</button>
      <button type="button"
              class="button button-block button-assertive button-raised icon icon-left ion-wand ink-dark visible-xs visible-sm"
              ng-click="logout()" ng-if="login" translate>COMMON.BTN_LOGOUT</button>


      <div class="text-center no-padding visible-xs stable">
        <br/>
        <!-- version -->
        {{'COMMON.APP_VERSION'|translate:{version: config.version} }}
        |
        <!-- about -->
        <a href="#" ng-click="showAboutModal()" translate>HOME.BTN_ABOUT</a>
      </div>

    </div>
  </ion-content>

</ion-view>

